<template>
  <div class="companyPosition">
    <div class="mynav">
      <!-- 头部信息 -->
      <van-nav-bar class="navBar" fixed>
        <template #title>
          <div>在招职位</div>
          <i>{{ positons.length }}</i>
        </template>
        <template #left>
          <span class="leftIcon" @click="$router.back()"
            ><van-icon name="arrow-left"
          /></span>
        </template>
      </van-nav-bar>
      <!-- 在招职位 -->
      <van-tabs line-width="0" v-model="active" swipeable sticky>
        <van-tab v-for="(item, index) in positionTypes" :key="index">
          <template #title>
            <span
              class="normal"
              @click="submitOptions(item)"
              :class="{ act: active === index }"
              >{{ item }}</span
            >
          </template>
        </van-tab>
      </van-tabs>
      <!-- 条件筛选 -->
      <positionPop :jobOptions="jobOptions" @getfinalOption="getfinalOption" @submitOptions = submitOptions />
    </div>
    <!-- 职位概览 -->
    <div class="posItem">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多职位了"
        @load="onLoad"
      >
        <positionItem :positons="positons" :data="data" />
      </van-list>
    </div>
  </div>
</template>

<script>
import { companyPositions, positionFilters } from '@/api/api.js'
export default {
  data () {
    return {
      active: 0,
      // 下拉加载
      loading: false,
      // 完成
      finished: false,
      // 查询数据
      data: {
        id: 0,
        limit: 100,
        start: 0
        // city: '',
        // experience: '',
        // salary: '',
        // type: ''
      },
      // 职位S
      positons: [],
      positionType: [],
      // 筛选数据
      jobOptions: [],
      // 最终选择的对象 城市薪资等
      finalOption: {}
    }
  },
  computed: {
    positionTypes: function () {
      return ['全部', ...this.positionType]
    }
  },
  methods: {
    async onLoad () {
      this.data.id = this.$route.params.id
      const data = this.data
      console.log('正在下拉加载更多')
      const res = await companyPositions(data)
      // console.log('职位列表')
      // console.log(res)
      // console.log('*********************')
      this.loading = false
      this.finished = true
      this.positons = [...this.positons, ...res.data.list]
      if (!this.positons.length) {
        this.loading = false
        this.finished = true
      }
    },
    // 获取职位种类
    async getPosiType () {
      const id = this.$route.params.id
      const res = await positionFilters(id)
      console.log(res)
      this.jobOptions = res.data
      this.positionType = res.data.types
    },
    // 获取最终选项
    async getfinalOption (data) {
      this.finalOption = data
    },
    // 职位筛选
    async submitOptions (type) {
      type = type === '全部' ? undefined : type
      const datas = {
        id: this.data.id,
        limit: 100,
        start: 0,
        type: type,
        city: this.finalOption.city,
        experience: this.finalOption.experience,
        salary: this.finalOption.salary
      }
      // console.log('----datas------------------------------')
      // console.log(datas)
      const res = await companyPositions(datas)
      console.log(res)
      this.positons = res.data.list
    }
  },
  created () {
    this.onLoad()
    this.getPosiType()
  },
  components: {
    positionPop: () => import('../companyDetail/positionPop'),
    positionItem: () => import('./positionItem')
  }
}
</script>

<style lang="less" scoped>
.companyPosition {
  .mynav {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    .navBar {
      position: relative;
      height: 50px;
      i {
        position: absolute;
        top: 5px;
        right: 35%;
        font-size: 10px;
        font-style: normal;
      }
      /deep/.van-nav-bar__left {
        left: 20px;
      }
      /deep/.van-icon {
        padding-left: 10px;
        font-size: 35px;
        color: #666666;
      }
    }
    .normal {
      display: inline-block;
      height: 28px;
      line-height: 28px;
      padding: 0 10px;
      background-color: #ccc;
      border-radius: 14px 14px 14px 14px;
    }
    .act {
      background-color: skyblue;
    }
  }
  .posItem {
    margin-top: 142px;
  }
}
</style>
